<template>
	<view class="note-tab">
		<wd-steps :active="4" vertical dot>
			<wd-step v-for="(item,index) in list" :key="index" :title="item.baseProject">
				<template #description>
					<view class="desc">实战项目项目：{{item.project}}</view>
					<view class="desc">技术：{{item.label}}</view>
					<view class="desc">时间：{{item.date}}</view>
					<view v-if="item.desc" class="desc">{{item.desc}}</view>
				</template>
			</wd-step>
		</wd-steps>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';

	const list = ref([{
		baseProject: '第一代',
		project: '公安局门户',
		label: 'express.js + boostrap3',
		date: '2022',
		desc:''
	}, {
		baseProject: '第二代',
		project: '农工商学校',
		label: 'express.js + layui',
		date: '2024',
	}, {
		baseProject: '第三代',
		project: '未知',
		label: 'dart sass',
		date: '未知',
		desc:'Rudy sass：2019年已停止维护'
	},
	])
</script>

<style lang="scss" scoped>
	.note-tab {
		padding: 20rpx;
	}
</style>